﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>后台系统- 登录</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    @*<link rel="shortcut icon" href="favicon.ico">*@
    <link href="~/Content/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="~/Content/css/animate.css" rel="stylesheet">
    <link href="~/Content/css/style.css?v=4.1.0" rel="stylesheet">

    <!--LOADING STYLESHEET FOR PAGE-->
    <link href="~/Content/vendors/sco.message/sco.message.css" rel="stylesheet" />
    <link href="~/Content/vendors/pageloader/pageloader.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if (window.top !== window.self) { window.top.location = window.location; }</script>
    <style type="text/css">
        .invalid {
            color: #db4c4a;
        }

        input:required, input:valid, input:invalid {
            border: 0 none;
            outline: 0 none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            -ms-box-shadow: none;
            -o-box-shadow: none;
            box-shadow: none;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name">H+</h1>
            </div>
            <h3>欢迎进入后台系统</h3>
            <form class="m-t" role="form" method="post">
                <div style="display:none">
                    <label for="pubkey">Public Key</label><br />
                    <textarea id="pubkey" rows="15" cols="65"> @ViewBag.PublicKey</textarea><br />
                </div>
                <div class="form-group">
                    <input id="txtUsername" type="text" class="form-control" name="username" placeholder="账户" required="">
                </div>
                <div class="form-group">
                    <input id="txtPassword" type="password" class="form-control" name="password" placeholder="密码" required="">
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-4 col-xs-8">
                            <div class="input-icon">
                                <input type="text" id="txtVerifycode" name="verifycode" placeholder="验证码" class="form-control required" required="" />
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-4">
                            <img style="cursor: pointer; vertical-align:middle;height:38px;margin-top:1px;border:1px solid #E5E5E5" src="/Common/VerifyImage" id="VerifyImage" title="看不清？点击换一个" onclick="javascript:document.getElementById('VerifyImage').src='/Common/VerifyImage?r='+Math.random();return false;">
                        </div>
                    </div>
                </div>
                <button  id="btnLogin" type="button" class="btn btn-primary block full-width m-b">登 录</button>               
            </form>
        </div>
    </div>

    <!-- 全局js -->
    <script src="~/Content/js/jquery.min.js?v=2.1.4"></script>
    <script src="~/Content/js/jsencrypt.min.js"></script>
    <script src="~/Content/js/bootstrap.min.js?v=3.3.6"></script>

    <script src="~/Content/vendors/jquery-validate/jquery.validate.min.js"></script>
    <script src="~/Content/vendors/jquery-validate/cn.js"></script>
    <!-- message -->
    <script src="~/Content/vendors/sco.message/sco.message.js"></script>
    <script src="~/Content/vendors/holder/holder.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnLogin').click(function () {
                if ($('#txtUsername').val().trim() == "")
                {
                    $.scojs_message("请输入用户名！", $.scojs_message.TYPE_ERROR);
                    return;
                }
                if ($('#txtPassword').val().trim() == "") {
                    $.scojs_message("请输入密码！", $.scojs_message.TYPE_ERROR);
                    return;
                }
                if ($('#txtVerifycode').val().trim() == "") {
                    $.scojs_message("请输入验证码！", $.scojs_message.TYPE_ERROR);
                    return;
                }
                var pkey = $('#pubkey').val();              
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(pkey);
                var uname = encrypt.encrypt($('#txtUsername').val().trim());
                var upwd = encrypt.encrypt($('#txtPassword').val().trim());
                $.ajax({
                    type: "POST",
                    url: "/Manage/Account/CheckLogin",
                    data: { "username": uname, "password": upwd, "verifycode": $("#txtVerifycode").val().trim() },
                    dataType: "json",
                    success: function (data, textStatus) {
                        if (data.Success) {
                            location.href = data.Message;
                        } else {
                            document.getElementById('VerifyImage').src = '/Common/VerifyImage?r=' + Math.random();
                            $.scojs_message(data.Message, $.scojs_message.TYPE_ERROR);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.scojs_message("远程服务器异常！", $.scojs_message.TYPE_ERROR);
                    }
                });
            });            
        });
        
    </script>
</body>

</html>
